<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2>基于大模型API的智能应用开发</h2>
        <p>
          本项目旨在利用大模型API的文本处理能力，在基于对话形式的基础上，通过数据库的数据存储持久性特性，构建更加丰满准确的智能体，以达到实时定制更新角色的目的，进一步挖掘大模型的潜力。
          本基于日志的对话应用主要用于定制个人化需求，例如个人信息的模板化输出(个人感想、个人简历等)，用户可以随时以日志随笔的形式为智能体添加人设描述，构建个人知识库，并调用大模型的推理处理能力生成预期内容，基于该特性，该项目在基于人设的角色扮演也有一定的应用潜力。
        </p>
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 50px">
        <el-row>
          <el-col :span="12">
            <h2>技术选型</h2>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <h4>大模型技术</h4>
            <ul>
              <li>oapi-java-sdk</li>
              <li>Agent</li>
            </ul>
          </el-col>
          <el-col :span="6">
            <h4>后端技术</h4>
            <ul>
              <li>Spring Cloud</li>
              <li>Spring Boot</li>
              <li>Spring Framework</li>
              <li>Spring Security</li>
              <li>MyBatis</li>
            </ul>
          </el-col>
          <el-col :span="6">
            <h4>前端技术</h4>
            <ul>
              <li>Vue3</li>
              <li>Element-plus</li>
              <li>Sass</li>
              <li>UniApp</li>
            </ul>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-divider />
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="update-log">
          <template v-slot:header>
            <div class="clearfix">
              <span>个人信息</span>
            </div>
          </template>
          <div class="body">
            <p>
              <i class="el-icon-chat-dot-round"></i> Gitee：<a
                href="https://gitee.com/White_Answer"
            >White_Answer</a
            >
            </p>
            <p>
              <i class="el-icon-chat-dot-round"></i> GitHub：<a
                href="https://github.com/uncoveredfigure"
            >uncoveredfigure</a
            >
            </p>
            <p>
              <i class="el-icon-chat-dot-round"></i> QQ：<a
                href="javascript:"
                >605351778</a
              >
            </p>
            <p>
              <i class="el-icon-money"></i>手机号：<a
                href="javascript:"
                >13616745302</a
              >
            </p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="update-log">
          <template v-slot:header>
            <div class="clearfix">
              <span>开发日志</span>
            </div>
          </template>
          <el-collapse accordion>
            <el-collapse>
              <el-collapse-item title="2024-07-17">
                <ol>
                  <li>进行项目打包，准备验收测试和文档撰写</li>
                  <li>域名备案通过，部署前后端至云服务器</li>
                  <li>取消后端对用户输入内容的防XSS处理，大模型可以识别用户给出的代码了</li>
                </ol>
              </el-collapse-item>
              <el-collapse-item title="2024-07-16">
                <ol>
                  <li>准备验收测试和撰写说明文档</li>
                  <li>导出数据库SQL文件，管理前端npm环境包</li>
                  <li>打包项目，推送源码到Gitee仓库</li>
                  <li>优化前后端，对大模型进行微调</li>
                  <li>熟悉后端令牌拦截原理</li>
                  <li>实现大模型的SSE流式输出</li>
                </ol>
              </el-collapse-item>
              <el-collapse-item title="2024-07-15">
                <ol>
                  <li>尝试使用EventSource+SseEmitter实现单向实时通信</li>
                  <li>探索前端同步大模型SSE流式输出的可行性</li>
                  <li>调整前端API部分内容</li>
                  <li>进行后端项目到微服务框架的移植</li>
                </ol>
              </el-collapse-item>
              <el-collapse-item title="2024-07-14">
                <ol>
                  <li>计划安卓软件开发，推送项目到远程仓库</li>
                  <li>准备域名和服务器，对网站进行备案准备</li>
                  <li>项目升级，安装配置Nacos，学习SpringCloud</li>
                  <li>考虑项目多平台适配与服务器部署问题</li>
                </ol>
              </el-collapse-item>
              <el-collapse-item title="2024-07-13">
                <ol>
                  <li>进行前端美化工作，对集成效果进行实践</li>
                  <li>学习构建精确的提示词，应用LangChain框架</li>
                  <li>优化大模型表现学习，了解RAG、Agent等技术</li>
                </ol>
              </el-collapse-item>
              <el-collapse-item title="2024-07-12">
                <ol>
                  <li>确定大模型API的应用方案</li>
                  <li>根据预案进行数据库和基本服务框架的搭建</li>
                </ol>
              </el-collapse-item>
              <el-collapse-item title="2024-07-11">
                <ol>
                  <li>同步进行前端美化工作和后端接口开发</li>
                  <li>实现了大模型的连续对话功能</li>
                </ol>
              </el-collapse-item>
              <el-collapse-item title="2024-07-10">
                <ol>
                  <li>考虑大模型API的进一步运用及与数据库的交互</li>
                  <li>继续前端美化工作，提高用户交互性</li>
                </ol>
              </el-collapse-item>
              <el-collapse-item title="2024-07-09">
                <ol>
                  <li>发现并解决前端XSS注入攻击问题</li>
                  <li>对前端页面进行美化</li>
                </ol>
              </el-collapse-item>
              <el-collapse-item title="2024-07-08">
                <ol>
                  <li>尝试解决前端md内容显示问题</li>
                  <li>开始后端开发，成功接入智谱GLM-4</li>
                </ol>
              </el-collapse-item>
              <el-collapse-item title="2024-07-07">
                <ol>
                  <li>阅读官方文档，了解LangChain和Java LangChain4j</li>
                  <li>创建智能应用模块，研究智谱API的调用实践</li>
                  <li>在智谱AI开放平台上注册并开通API</li>
                </ol>
              </el-collapse-item>
              <el-collapse-item title="2024-07-06">
                <ol>
                  <li>在开源社区寻找项目开发灵感</li>
                  <li>研究前后端接口对接、拦截器原理以及请求转发方式</li>
                  <li>深入学习框架，熟悉前端element-plus组件库</li>
                </ol>
              </el-collapse-item>
              <el-collapse-item title="2024-07-05">
                <ol>
                  <li>项目启动，开始进行技术栈和开发框架的选择</li>
                  <li>初步确立大模型API为智谱清言</li>
                </ol>
              </el-collapse-item>
            </el-collapse>
          </el-collapse>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">

function goTarget(url) {
  window.open(url, '__blank')
}
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

